<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
<!--
	预留插槽的作用  主要目的  是为了扩展 功能  

	就是组件预留一个空间，想让这个空间做什么就做什么

就好比   网页中的导航栏  （抽取出来 ，封装组件的时候不要写死，预留插槽
 通过插槽来改变，不同页面下导航栏的显示样式）

 抽取共性，保留不同（插槽）

-->


<!--基本使用 
	在模板中  <solt></solt>  放置这个就相当于给在这个模板中预留了插槽的位置
	当然也可以在  插槽里面预留默认值 <solt><button></button></solt>，当你在使用组件的时候不填入东西
	这个槽位就默认显示这个按钮

	当年你使用这个组件的时候  如<cpn><a></a></cpn>在内容区域加东西，就相当于把东西加到了插槽的位置
	这样a标签就覆盖了上面插槽中的按钮

-->


		<!-- 
			1.插槽的基本使用
			2.插槽的默认值，<slot>button</slot>
			3.如果有多个值，同时放入到组件进行替换时，一起作为替换元素
		 -->
		<template id="cpn">
			<div>
				<div>我是子组件</div>
				<slot><button>插槽默认元素</button></slot>
			</div>
		</template>
		<div id="app">
			<!--使用子组件并替换了插槽里面的东西-->
			<cpn><button>按钮</button></cpn>
			<hr>
			
			<!--使用子组件并替换了插槽里面的东西-->
			<cpn>
				<input type="text" placeholder="请输入姓名" />
				<div class="mui-input-row mui-search">
					<input type="search" class="mui-input-clear" placeholder="请输入">
				</div>				
			</cpn>
			<hr>

			<!--使用子组件，没有做任何替换，默认使用插槽里面的东西-->
			<cpn></cpn>
		</div>

		<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			const app = new Vue({
				el: '#app',
				data: {
					message: 'hello'
				},
				components:{
					cpn:{
						template:"#cpn",
						
					}
				}
			});
		</script>
	</body>
</html>
